<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test0"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <script src="../React-js/prop-types.js" type="text/javascript"></script>
    <script type="text/babel">

         class Person extends React.Component{
            static propTypes = {
                name:PropTypes.string.isRequired, // 必传且为字符串
                sex:PropTypes.string, // 非必传 字符串
                age:PropTypes.number, // 非必传 数字
            }
            static defaultProps = {
                sex:'男D',
                age:18
            }
            constructor(){
                // 构造器中不传递props 使用this访问实例对象上的props 会为undefined
                super()
                // 构造器中是否接收并传递给super 取决于：是否希望再构造器中通过this访问props
                console.log(this.props); // 打印的是undefined
            }
            render(){
                const {name,sex,age} = this.props
                // props 是只读的
                // this.props.name = 'Jerry' // 报错
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name='Tom'  age={19} sayHi={sayHi}/>,document.querySelector('#test0'))
        ReactDOM.render(<Person name='Jerry' sex='女' />,document.querySelector('#test1'))
        const p = {name:'Dog',sex:'男',age:19} // key value 相同可以简写
        ReactDOM.render(<Person {...p}/>,document.querySelector('#test2'))
        function sayHi(){
            console.log('hi');
        }
    </script>
</body>
</html>